<script setup lang="ts">
import { useAddOrEditInvoiceTitle, useGetInvoiceTitleList } from '@fl/api/member-api'
import { useMessage } from '@fl/hooks/web/use-message'
import { treeFindLabel } from '@fl/utils/tree'

import AddOrEdit from './components/add-or-edit.vue'
import { INVOICE_TITLE_IS_DEFAULT, INVOICE_TYPE_OPTIONS } from './constant'

const { createConfirmModal } = useMessage()

const showAddOrEdit = ref<boolean>(false)
const addOrEditData = ref<any>()

const { data: invoiceTitleListData, isLoading: isGetInvoiceTitleListLoading } = useGetInvoiceTitleList()
const { isPending: _isAddOrEditInvoiceTitlePending, mutate: addOrEditInvoiceTitle } = useAddOrEditInvoiceTitle()

const isLoading = computed(() => isGetInvoiceTitleListLoading.value)
// #region UI Listener
function onAddBtnClick() {
    addOrEditData.value = null
    showAddOrEdit.value = true
}

// function onSetDefaultBtnClick(item: any) {
//     const params = {
//         id: item.id,
//         isDefault: 1,
//     }
//     addOrEditInvoiceTitle(params, {
//         onSuccess() {
//             ElMessage.success('操作成功')
//         },
//     })
// }

function onEditBtnClick(item: any) {
    addOrEditData.value = item
    showAddOrEdit.value = true
}

function onDeleteBtnClick(item: any) {
    createConfirmModal({
        content: '确定要删除该发票抬头信息吗？',
        onSuccess: () => {
            const params = {
                id: item.id,
                isDeleted: 1,
            }
            addOrEditInvoiceTitle(params, {
                onSuccess() {
                    ElMessage.success('操作成功')
                },
            })
        },
        title: '提示',
    })
}
// #endregion
</script>

<template>
    <el-main>
        <el-row>
            <el-col :span="6">
                <el-button type="primary"
                           @click="onAddBtnClick"
                >
                    <div class="i-ic:baseline-add size-16" />
                    新建
                </el-button>
            </el-col>

            <el-col :span="24"
                    class="mt-40 h-606 overflow-auto"
            >
                <el-skeleton v-if="isLoading"
                             animated
                />

                <el-empty v-else-if="!invoiceTitleListData.length"
                          description="暂无数据"
                />

                <el-card v-for="item in invoiceTitleListData"
                         v-else
                         :key="item.toString()"
                         class="relative"
                >
                    <div class="align-center flex justify-between">
                        <span class="text-[16px] font-semibold leading-32">发票抬头信息</span>

                        <el-space>
                            <!-- <el-button v-if="item.isDefault === INVOICE_TITLE_IS_DEFAULT.IS_NOT_DEFAULT"
                                       text
                                       type="primary"
                                       class="!p-4 !text-[#409eff]"
                                       @click="onSetDefaultBtnClick(item)"
                            >
                                设为默认
                            </el-button> -->

                            <el-button text
                                       type="primary"
                                       class="!p-4 !text-[#409eff]"
                                       @click="onEditBtnClick(item)"
                            >
                                编辑
                            </el-button>

                            <el-button text
                                       type="primary"
                                       class="!p-4"
                                       @click="onDeleteBtnClick(item)"
                            >
                                删除
                            </el-button>
                        </el-space>
                    </div>

                    <div class="mt-16 flex gap-8">
                        <div class="flex-1">
                            <div class="mb-8 text-[#aaa]">
                                发票抬头
                            </div>

                            <div>{{ item.invoiceTitle }}</div>
                        </div>

                        <div class="flex-1">
                            <div class="mb-8 text-[#aaa]">
                                默认发票类型
                            </div>

                            <div>{{ treeFindLabel({ targetValue: item.invoiceType, treeData: INVOICE_TYPE_OPTIONS }) }}</div>
                        </div>

                        <div class="flex-[2]">
                            <div class="mb-8 text-[#aaa]">
                                抬头类型
                            </div>

                            <div>企业</div>
                        </div>
                    </div>

                    <div v-if="item.isDefault === INVOICE_TITLE_IS_DEFAULT.IS_DEFAULT"
                         class="border-r-40 border-t-40 border-r-[transparent] border-t-[#dA0004] text-white absolute h-0 w-0 inset-0"
                    >
                        <span class="p-4 mt-[-40px] inline-block text-[10px] font-semibold w-40 float-left">默认</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </el-main>

    <AddOrEdit v-model:visible="showAddOrEdit"
               :invoice-title-data="addOrEditData"
    />
</template>

<style scoped>
.el-card + .el-card {
    margin-top: 20px;
}
</style>
